<template> 
	<div class="rwtj-box">
		<div class="rwtj-title border-bottom">
			-任务推荐-
		</div>
		<ul class="rwtj-nav">
			<li class="rwtj-list border-bottom"
				v-for="item in list"
				:key="item.id"
			> 
				<div class="rwtj-list-top slh">
					<div class="rwtj-list-top-l border">
						<span class="zbtitle">{{item.types}}</span>
						<span class="zbmony">¥ {{item.monly}}</span>
					</div> 
					<div class="twname">{{item.title}}</div>
					<div class="rwtype">{{item.nowtypes}}</div>
				</div> 
				<div class="rwtj-list-down dian">
					<div class="rwdata">截止时间：{{item.closeTime}}</div>
					<div class="leixing dian">赏金分配：{{item.feipei}}</div>
					<div class="tbnumber">{{item.tbNum}}人投标</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
export default{
	name:'rwtj',
	data () {
		return{
			list:[
				{
					id:'001',
					types:'招标任务',
					monly:'2000',
					title:'设计公司logo',
					nowtypes:'招标中',
					closeTime:'2018-02-25',
					feipei:'一人独享',
					tbNum:'20'
				},
				{
					id:'002',
					types:'招标任务',
					monly:'2000',
					title:'设计公司logo',
					nowtypes:'招标中',
					closeTime:'2018-02-25',
					feipei:'一人独享',
					tbNum:'253'
				},
				{
					id:'003',
					types:'投标任务',
					monly:'8000',
					title:'设计公司logo',
					nowtypes:'投标中',
					closeTime:'2018-02-25',
					feipei:'一人独享',
					tbNum:'26'
				},
				{
					id:'004',
					types:'招标任务',
					monly:'2000',
					title:'设计公司logo',
					nowtypes:'招标中',
					closeTime:'2018-02-25',
					feipei:'一人独享',
					tbNum:'25'
				},
			]
		}
	}
}
</script>
<style scoped>
.rwtj-title{
	font-size: .3rem;
	line-height: .88rem;
	text-align: center;
	background: #fff;
}
.rwtj-nav{
	padding: 0 .3rem;
	background-color: #fff;
}
.rwtj-list{
	padding: .2rem 0 .19rem 0 ;
}
.rwtj-list:after{
	display: block;
	visibility:hidden;
	clear: both;
	height: 0;
	content: ""; 
}  
.rwtj-list-top-l{
	height: .38rem;
	line-height: .38rem;
	width: 2.13rem;
	border: 0.001rem solid #f72b37;
	float: left; 
}
.zbtitle{
	display: block;
	float: left;
	width: 1.09rem;
	background-color: #f72b37;
	font-size: .24rem;
	color: #fff;
	text-align: center;
	line-height: .38rem;
}
.zbmony{
	display: block;
	text-align: center;
	font-size: .24rem;
}
.twname{
	height: .4rem;
	width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: .4rem;
	padding-left: .15rem;
	float: left;
}
.rwtype{
	float: right;
	color: #f72b37;
	display: block;
	line-height: .4rem;
}
.rwtj-list-down{
	margin-top: .2rem;
}
.rwdata{
	width: 42%;
	float: left;
	font-size: .24rem;
}
.leixing{
	float: left;
	font-size: .24rem;
	width: 33%;
}
.tbnumber{
	float: right;
	font-size: .24rem;
}
</style>